<template>
	<view class="container">
		<view class="order">
			<view class="head">
				<view class="order-info">
					<view class="flex-tag">
						<view class="tag">
							自取
						</view>
						<view class="name">
							SipSite 幸福
						</view>
					</view>
					<view class="state">
						已完成
					</view>
				</view>
				<view class="time">
					2025-01-22 21:11:26
				</view>
			</view>
			<view class="main">
				<view class="products">
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
				</view>
				<view class="product-info">
					<view class="price">
						￥50
					</view>
					<view class="count">
						共 2 件
					</view>
				</view>
			</view>
			<view class="menu-id">
				<view class="menu">
					取餐号：
				</view>
				<view class="id">
					0195
				</view>
			</view>
			<view class="again">
				<view class="btn" @click="goMenu">
					再来一单
				</view>
			</view>
		</view>

		<view class="order">
			<view class="head">
				<view class="order-info">
					<view class="flex-tag">
						<view class="tag">
							自取
						</view>
						<view class="name">
							SipSite 幸福
						</view>
					</view>
					<view class="state">
						已完成
					</view>
				</view>
				<view class="time">
					2025-01-22 21:11:26
				</view>
			</view>
			<view class="main">
				<view class="products">
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
					<view class="product">
						<img class="img" src="/static/c1.png" alt="" />
						<view class="title">
							粉粉鸽
						</view>
					</view>
				</view>
				<view class="product-info">
					<view class="price">
						￥50
					</view>
					<view class="count">
						共 2 件
					</view>
				</view>
			</view>
			<view class="menu-id">
				<view class="menu">
					取餐号：
				</view>
				<view class="id">
					0195
				</view>
			</view>
			<view class="again">
				<view class="btn" @click="goMenu">
					再来一单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goMenu() {
				uni.switchTab({
					url: '/pages/menu/menu'
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #f4f4f4;

		.order {
			width: 90vw;
			margin: 20rpx auto;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			.head {
				.order-info {
					display: flex;
					justify-content: space-between;

					.flex-tag {
						display: flex;
						align-items: center;

						.tag {
							font-size: 24rpx;
							color: #eedd9e;
							border: 4rpx solid #eedd9e;
							border-radius: 4rpx;
							margin-right: 12rpx;
							font-weight: bold;
						}

						.name {
							font-size: 28rpx;
							font-weight: bold;
						}
					}

					.state {
						font-size: 24rpx;
						color: #7c7c7c;
					}
				}

				.time {
					font-size: 24rpx;
					color: #a5a5a5;
				}
			}

			.main {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.products {
					width: 70vw;
					display: flex;
					overflow: auto;

					::-webkit-scrollbar {
						display: none;
					}

					.product {
						margin-right: 8rpx;

						.img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 20rpx;
						}

						.title {
							font-size: 32rpx;
							color: #7c7c7c;
							width: 120rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}

				}

				.product-info {
					text-align: right;

					.price {
						font-size: 28rpx;
						font-weight: bold;
					}

					.count {
						color: #7c7c7c;
						font-size: 24rpx;
					}
				}
			}

			.menu-id {
				background-color: #f4f4f4;
				border-radius: 20rpx;
				padding: 16rpx;
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				font-size: 26rpx;

				.id {
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.again {
				text-align: center;
				margin-top: 16rpx;
				font-size: 24rpx;
				display: flex;
				justify-content: flex-end;

				.btn {
					border: 2rpx solid #7c7c7c;
					padding: 10rpx 20rpx;
					border-radius: 60rpx;
				}
			}
		}
	}
</style>